<template>
  <a-drawer width="800px" title="机源信息详情" :open="true" @close="onClose" class="desc">
    <a-spin :spinning="loading">
      <template v-if="item">
        <a-descriptions title="基础信息" bordered size="small" :column="2">
          <a-descriptions-item label="名称">{{ item.name }}</a-descriptions-item>
          <a-descriptions-item label="停放位置">{{ item.parkProvince }} · {{ item.parkCity }}</a-descriptions-item>
          <a-descriptions-item label="归属商户" >
            <StoreLink :item="item.store" />
          </a-descriptions-item>
          <a-descriptions-item label="创建时间" >
            {{ item.createTime }}
          </a-descriptions-item>
          <a-descriptions-item label="吨位" :span="2">
            {{ item.tonnage }} 吨
          </a-descriptions-item>
          <a-descriptions-item label="品牌" :span="2">
            <BrandLink :id="item.brandId" v-if="item.brandId"/>
          </a-descriptions-item>
          
        </a-descriptions>
        <a-descriptions title="销售信息" bordered size="small" class="mt">
          <a-descriptions-item label="售价">{{ item.price }} 万元</a-descriptions-item>
          <a-descriptions-item label="可议价">{{ item.priceReduce ? '是' : '否' }} </a-descriptions-item>
          <a-descriptions-item label="可租赁">
            {{ item.rentable ? '是' : '否' }}
          </a-descriptions-item>
          <a-descriptions-item label="租赁价格">
            {{ item.rentPrice ? item.rentPrice.toFixed(2) : '-' }} 万/月
          </a-descriptions-item>
          <a-descriptions-item label="带机手">
            {{ item.rentDriver ? '是' : '否' }}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions title="属性信息" bordered size="small" class="mt">
          <a-descriptions-item label="表显小时数">{{ item.hours }}</a-descriptions-item>
          <a-descriptions-item label="出厂时间">{{ item.deliveryDate }}</a-descriptions-item>
          <a-descriptions-item :label="key" v-for="(key, i) in Object.keys(item.props)" :key="i">
            {{ item.props[key] }}
          </a-descriptions-item>
        </a-descriptions>
        <div class="h2 my">图片视频</div>
        <span v-if="fileList.length == 0"> 无 </span>
        <a-upload accept="image/*,video/*" v-model:file-list="fileList" list-type="picture-card"
          :before-upload="() => false">
        </a-upload>
        <div class="h2 my">备注</div>
        <div>{{ item.remark ? item.remark : '无' }}</div>
      </template>
    </a-spin>
  </a-drawer>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { getItemById } from '@/api/item'
import { getFile } from '@/api/att'
import StoreLink from './StoreLink.vue';
import BrandLink from './BrandLink.vue';
const props = defineProps(['id'])
const emit = defineEmits(['close'])


const item = ref(null)
const loading = ref(false)
const fileList = ref([])

onMounted(() => {
  parseProp()
})

watch(() => props.id, () => {
  parseProp()
})

const parseProp = async () => {
  if (props.id) {
    loading.value = true
    const res = await getItemById(props.id)
    loading.value = false
    const it = res.data
    item.value = it

    if (it.medias && it.medias.length > 0) {
      fileList.value = it.medias.map(i => {
        return {
          id: i.id,
          mime: i.mime,
          name: i.name,
          size: i.fileSize,
          url: getFile(i.id)
        }
      })
    }
  }
}


const onClose = () => {
  emit('close')
}
</script>

<style lang="less" scoped></style>